<template>
    <div class="cms-job">
        <div class="job-title">企业招聘</div>
        <div v-for="(item,index) in jobData" class="job-content">
            <div class="office-content"  @mouseenter="activeOfficeContent = item.id" :class="{activeOfficeContent:(item.id == activeOfficeContent)}">
                <img :src="item.jobBackground" class="bg-image" @mouseenter="bgContentShow(index)">
                <div class="bg-content" ref="bgContent" @mouseout="bgContentNone(index)">
                    <h3>{{item.jobTitle}}</h3>
                    <p>{{item.jobDetail}}</p>
                </div>
            </div>
            <div class="office-content-bottom">{{item.jobTitle}}</div>
        </div>
    </div>
</template>

<script>
    import jobApi from '@/api/jobApi'
    export default {
        name: "CmsJob",
        data(){
            return{
                activeOfficeContent:'',
                jobData:[]
            }
        },
        methods:{
            bgContentShow(index){
                this.$refs.bgContent[index].style.height = '250px'
            },
            bgContentNone(index){
                this.$refs.bgContent[index].style.height = '0px'
            }
        },
        created:async function(){
            let res = await jobApi.jobDetail();
            if (res.code == '200'){
                this.jobData = res.data
            }
        }
    }
</script>

<style scoped>
    .cms-job{
        text-align: center;
        max-width:1540px;
        width: 100%;
        /*margin: 0 auto;*/
        margin-left: 10%;
        margin-bottom: 150px;
        float: left;
        height: auto;
    }
    .job-title{
        margin-top: 80px;
        font-size: 36px;
        color: #ff7908;
    }
    .job-content{
        width: 25%;
        height: 250px;
        float: left;
        margin-top: 50px;
    }

    .office-content{
        width: 80%;
        margin-left: 10%;
        height: 100%;
        border-radius: 10px;
        box-shadow: 2px 2px 30px #e0e0e0;
        background-color: #FFFFFF;
        z-index: -10;
        float: left;
    }
    .bg-image{
        float: left;
        width: 100%;
        height: 100%;
        border-radius: 10px;
        cursor: pointer;
        z-index: -1;
    }
    .bg-content{
        cursor: pointer;
        overflow: hidden;
        float: left;
        position: relative;
        top: -250px;
        width: 85%;
        height: 0px;
        border-radius: 10px;
        background-color: rgba(57,61,72,.55);
        z-index: 100;
        color: #FFFFFF;
        margin: auto;
        padding-left: 25px;
        padding-right: 25px;
        transition: all 0.3s linear;
    }
    .bg-content > h3{
        margin-top: 50px;
        margin-bottom: 10px;
    }
    .office-content-bottom{
        width: 100%;
        float: left;
        margin-top: 10px;
    }

</style>